import { useState, Suspense } from 'react';
import { Layout, Spin, ConfigProvider } from 'antd';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

// 导入 Ant Design 样式
import 'antd/dist/reset.css';

// 布局组件
import AppHeader from './components/Layout/Header';
import AppSider from './components/Layout/Sider';
import AppContent from './components/Layout/Content';
import AppFooter from './components/Layout/Footer';

// 页面组件
import Dashboard from './pages/Dashboard';
import ImageUpload from './pages/Upload/Image';
import AudioUpload from './pages/Upload/Audio';
import AccountCenter from './pages/Account/Center';
import AccountSettings from './pages/Account/Settings';
import NotFound from './pages/Exception/404';

// 样式
import './App.less';

// 创建 React Query 客户端
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      retry: 1,
      staleTime: 5 * 60 * 1000, // 5分钟
    },
  },
});

function App() {
  const [collapsed, setCollapsed] = useState(false);

  const toggleCollapsed = () => {
    setCollapsed(!collapsed);
  };

  return (
    <Router>
      <QueryClientProvider client={queryClient}>
        <ConfigProvider
          theme={{
            token: {
              colorPrimary: '#1890ff',
            },
          }}
        >
          <Layout className="app-layout">
            <AppHeader collapsed={collapsed} toggle={toggleCollapsed} />
            <AppSider collapsed={collapsed} toggle={toggleCollapsed} />
            <Layout className={`site-layout ${collapsed ? 'collapsed' : ''}`}>
              <Suspense fallback={<Spin size="large" className="app-loading" />}>
                <AppContent>
                  <Routes>
                    <Route path="/" element={<Navigate to="/dashboard" replace />} />
                    <Route path="/dashboard" element={<Dashboard />} />
                    <Route path="/upload/image" element={<ImageUpload />} />
                    <Route path="/upload/audio" element={<AudioUpload />} />
                    <Route path="/account/center" element={<AccountCenter />} />
                    <Route path="/account/settings" element={<AccountSettings />} />
                    <Route path="/404" element={<NotFound />} />
                    <Route path="*" element={<Navigate to="/404" replace />} />
                  </Routes>
                </AppContent>
              </Suspense>
              <AppFooter />
            </Layout>
          </Layout>
          <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-right" />
        </ConfigProvider>
      </QueryClientProvider>
    </Router>
  );
}

export default App;
